<template>
	<view class="">
		<view v-show="data[current].title=='服务'" style=" position: fixed; bottom: 50rpx; margin-left: 10%; z-index: 2;">
			<view class="row-left-body">￥元</view>
			<view class="row-right-body">
				去结算
			</view>
		</view>

		<view v-show="data[current].title=='车型'" style=" position: fixed; bottom: 50rpx; margin-left: 10%; z-index: 2;">
			<button style=" border: 1rpx solid black; width: 580rpx;border-radius: 50rpx;background-color: rgba(235, 225, 225, 0.3);color:
				##797979;font-weight: 400; " type="default">立即订阅</button>
		</view>

		<view
			style=" position: fixed; bottom: 30%; left: 85%; z-index: 2; background-color: red; border-radius: 50rpx; width: 90rpx; height: 80rpx ">
			<image src="../../static/kf.png" style="width: 80rpx; height: 70rpx; margin: 5rpx;"></image>
		</view>

		<scroll-view scroll-x :scroll-into-view="'yy_'+current" show-scrollbar="true">
			<view style="display: flex; flex-direction: row;">
				<text :class="index===current?'cur':''" :id="'yy_'+index" style="display: inline-block;padding: 10px;"
					v-for="(item,index) in data" :key="index" @click="chooseItem(item,index)">
					{{item.title}}
				</text>
			</view>
		</scroll-view>
		<!-- <view class="" v-for="(item,index) in data " :key="index">
			<text>{{item.desc}}</text>
		</view> -->
		<view class="home-page-swiper">


			<swiper @change="swiperChanged" style="width: 100%; height: 100%;" :current="current">
				<swiper-item>
					<view v-for="(item,index) in carModels" :key="index">
						<image
							style="width:100%;height: 240px;display: inline-block;overflow: hidden;position: relative;"
							mode="aspectFill" :src="item.img"></image>
						<view class="carTypeTitle">{{item.title}}</view>
						<view class="carTypeTitle">{{item.subhead}}</view>
						<view class="carTypetext"> {{item.content}}</view>
					</view>
				</swiper-item>
				<!-- <swiper-item >
							<view >
								<view style="margin-top: 40rpx; margin: 20rpx; border:1px solid #000; border-radius: 20px;" >
									<uni-row class="demo-uni-row" >
										<uni-col :span="12">
											<view style="margin-top: 30rpx; margin-bottom: 10rpx;" class="carTypeTitle">30天订阅体验</view>
											<view  style="margin-top: 10rpx; margin-bottom: 30rpx;"><text class="carTypeTitle">￥5799</text>/30天 起</view>
											<view class="carTypetext">
													<view>A:30天订阅体验</view>
													<view>B:30天订阅体验</view>
													<view>C:30天订阅体验</view>
											</view>
											</uni-col>
										<uni-col :span="12">
											<image  style="height: 100px; width: 100%; margin-top: 10%;"  src="../../static/logo.png"></image>
										</uni-col>
										</uni-row>
								</view>
								
							</view>
						</swiper-item> -->
				<swiper-item>


					<view style="width: 98%; margin-left: 26rpx;">
						<view style="margin: 15rpx;">
							<image src="../../static/tsl4.jpg" style="width: 95%; height: 300rpx;"></image>
						</view>
						<view class="car-name">
							<uni-row class="demo-uni-row">
								<uni-col :span="12">
									小鹏 G3i
								</uni-col>
								<uni-col :span="12">
									￥5799/月
								</uni-col>
							</uni-row>
						</view>
						<view class="car-Model">
							<uni-row class="demo-uni-row">
								<uni-col :span="12">
									460G
								</uni-col>
								<uni-col :span="12">
									30天预定体验
								</uni-col>
							</uni-row>
						</view>

						<view style="display: flex; margin-top: 20rpx;">
							<view style="display: flex;">
								<view class="row-left-content">
									取车时间
								</view>
								<view class="row-middle-content">
									●
								</view>
								<view class="row-right-content">
									请选择取车时间
								</view>
								<view>
									<image style="height: 25rpx;width: 40rpx; padding-left: 100rpx;padding-top: 22rpx; "
										src="../../static/dyh.png" mode=""></image>
								</view>
							</view>
						</view>

						<view style="display: flex;margin-top: 25rpx;">
							<view style="display: flex;">
								<view class="row-left-content" style="color:white;background-color: red;">
									取车地点
								</view>
								<view class="row-middle-content">
									●
								</view>
								<view class="row-right-content">
									请选择取车地点
								</view>
								<view>
									<image style="height: 25rpx;width: 40rpx; padding-left: 100rpx;padding-top: 22rpx; "
										src="../../static/dyh.png" mode=""></image>
								</view>
							</view>
						</view>



						<view class="car-container" @click="openServerClick(1)">
							<view style="display: flex;">
								<view class="car-conten-title">
									基础保障服务
								</view>
								<view>
									<image class="car-conten-icon" src="../../static/mark.png" mode=""></image>
								</view>
								<view class="car-conten-title" style="margin-left: 55%; font-size: 25rpx;">￥/月</view>
								<view>

								</view>
							</view>
						</view>

						<view class="car-container">
							<view style="display: flex;">
								<view class="car-conten-title" @click="openServerClick(2)">
									安心升级保障
								</view>
								<view>
									<image class="car-conten-icon" src="../../static/mark.png" mode=""></image>
								</view>
							</view>
						</view>
						<view style="margin-right: 35rpx;">
							<uni-table border emptyText="暂无更多数据">
								<!-- 表头行 -->
								<uni-tr>
									<uni-td width="210" background-color="#e9e9e9"></uni-td>
									<uni-td align="center" background-color="#e9e9e9" v-for="(item,index) in items"
										:key="index">
										<text>{{item.value}}</text>

									</uni-td>
								</uni-tr>
								<!-- 表格数据行 -->
								<uni-tr v-for="(item,index) in DtlAudiSVListA " :key="index">
									<uni-td align="center">
										{{item.CarSvrItemName}}
									</uni-td>
									<uni-td align="center">{{item.CarSVIPriceA}}
									</uni-td>
									<uni-td align="center">
										{{item.CarSVIPriceB}}
									</uni-td>
									<uni-td align="center">
										{{item.CarSVIPriceC}}
									</uni-td>

								</uni-tr>
								<uni-tr style=" background-color: #e9e9e9;">
									<uni-td background-color="#e9e9e9" align="center">选择</uni-td>
									<uni-td background-color="#e9e9e9" v-for="(item,index) in items" :key="index">
										<radio style="padding-left: 35%" :value="item.value"
											:checked="item.value==radioUpgradeValue" @click="radioUpgradeCheck(index)">
										</radio>
									</uni-td>
								</uni-tr>
							</uni-table>
						</view>

						<view v-if="radioUpgradeValue!=''&&radioUpgradeValue!=null"
							style="text-align: right; color: red; font-size: 30rpx; padding-right: 40rpx;">
							已选择：<text style="color: black;">{{radioUpgradeValue}}</text>
						</view>

						<view class="car-container">
							<view style="display: flex;">
								<view class="car-conten-title" @click="openServerClick(2)">
									安心管家保障
								</view>
								<view>
									<image class="car-conten-icon" src="../../static/mark.png" mode=""></image>
								</view>
							</view>
						</view>
						<view style="margin-right: 35rpx;">
							<uni-table border stripe emptyText="暂无更多数据">
								<!-- 表头行 -->
								<uni-tr>
									<uni-td align="center" width="210" background-color="#e9e9e9"></uni-td>
									<uni-td align="center" background-color="#e9e9e9"
										v-for="(item,index) in stewardItems" :key="index">{{item.value}}</uni-td>

								</uni-tr>
								<!-- 表格数据行 -->
								<uni-tr v-for="(item,index) in DtlAudiSVListB " :key="index">
									<uni-td align="center">{{item.CarSvrItemName}}</uni-td>
									<uni-td align="center">{{item.CarSVIPriceA}}</uni-td>
									<uni-td align="center">{{item.CarSVIPriceB}}</uni-td>
									<uni-td align="center">{{item.CarSVIPriceC}}</uni-td>

								</uni-tr>
								<uni-tr>
									<uni-td background-color="#e9e9e9" align="center">
										<view style="font-size: 25rpx;">选择</view>
									</uni-td>
									<uni-td background-color="#e9e9e9" v-for="(item,index) in stewardItems"
										:key="index">
										<radio style="padding-left: 35%;" :value="item.value"
											:checked="item.value==radioStewardValue" @click="radioStewardCheck(index)">
										</radio>
									</uni-td>

								</uni-tr>
							</uni-table>
							<view v-if="radioStewardValue!=''&&radioStewardValue!=null"
								style="text-align: right; color: red; font-size: 30rpx; padding-right: 40rpx;">
								已选择：<text style="color: black;">{{radioStewardValue}}</text>
							</view>
						</view>

						<view class="car-container">
							<view class="car-conten-title">
								订阅流程
							</view>
						</view>
						<image src="../../static/lc.jpg" style="width: 92%; height: 400rpx; margin-left: 10rpx;">
						</image>

					</view>



				</swiper-item>
			</swiper>

		</view>

		<uni-popup ref="popup">
			<view style="display: flex;flex-direction: column;align-items: center;">
				<view style="background-color: #fff; margin-bottom: 20rpx; width: 600rpx; border-radius: 30rpx; ">
					
						<view style="margin: 40rpx ; height: 700rpx;; overflow-y:scroll; ">
							<view class="popup-title">安心保障服务</view>
							<view class="popup-subtitle">基础保障服务</view>
							<view class="popup-summarize"><text style="color: red;">·</text>保险理赔范围内1500元(含)以上部分的车损
							</view>
							<view class="popup-summarize"><text style="color: red;">·</text>无需承担三者100万（含)以内的损失</view>
							<view class="popup-content">客户必须购买的项目，包括车辆发生意外时，无需承担保险理赔范围内的本车车辆损失1500元（不含）以上的部分
								及无需承担保险理赔范国内的第三者损失100万元（含）
								_司以内的部分。轻出行服务专员协助处理意外/事故的相关费用，基础服务费的实际价格以预订时，页面展示价格为准。超时还车大于等于4小时的，按1天（24小时）计费，按照对应订单基础保障服务费价格除以对应天数，计算对
								应1天（24小时）的价格，超时还车小于4小时的，暂不收
								安心 取基础保障服务费。</view>
								
								<view class="popup-content">客户必须购买的项目，包括车辆发生意外时，无需承担保险理赔范围内的本车车辆损失1500元（不含）以上的部分
									及无需承担保险理赔范国内的第三者损失100万元（含）
									_司以内的部分。轻出行服务专员协助处理意外/事故的相关费用，基础服务费的实际价格以预订时，页面展示价格为准。超时还车大于等于4小时的，按1天（24小时）计费，按照对应订单基础保障服务费价格除以对应天数，计算对
									应1天（24小时）的价格，超时还车小于4小时的，暂不收
									安心 取基础保障服务费。</view>
									
									<view class="popup-content">客户必须购买的项目，包括车辆发生意外时，无需承担保险理赔范围内的本车车辆损失1500元（不含）以上的部分
										及无需承担保险理赔范国内的第三者损失100万元（含）
										_司以内的部分。轻出行服务专员协助处理意外/事故的相关费用，基础服务费的实际价格以预订时，页面展示价格为准。超时还车大于等于4小时的，按1天（24小时）计费，按照对应订单基础保障服务费价格除以对应天数，计算对
										应1天（24小时）的价格，超时还车小于4小时的，暂不收
										安心 取基础保障服务费。</view>
						</view>
					
				</view>
				<view
					style="color: #fff;font-size: 40rpx;text-align: center;border: 1px solid #fff;border-radius: 50%;width: 60rpx;height: 60rpx;line-height: 60rpx;"
					@click="closeServerClick">
					X
				</view>

			</view>

		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				single: '', //取车地点
				current: 0,
				value: '',
				data: [{
						title: "车型"
					},
					// {title:"方案"},
					{
						title: "服务"
					},
				],
				carModels: [{
						img: "../../static/tsl4.jpg",
						title: "性能",
						subhead: "表现非凡",
						content: "Model x纯电动平台集成了动力总成和电池技术,可实现更高的效率,性能和续航。得益于全新的电池模块设计和热管理系統架构,Model x的充电速座更快，在不同的路况和天气条件均可获得更多动力和耐力"
					},
					{
						img: "../../static/tsl5.jpg",
						title: "内饰",
						subhead: "极具末来感",
						content: "全新中央触摸屏具备高达2200x1300的分辦率，以及高色彩保真度和响应灵敏度,观看视频时体验更佳。Modol X标配超大全最挡风破去內部空问亮政明亮,最多可容纳七人乘坐"
					},
					{
						img: "../../static/tsl.jpg",
						title: "实用性",
						subhead: "超大容量",
						content: "作为一款纯电动SUV,Model ×拥有超大的载物空问越的牽引能力。應哭门的独特开启方式使后排乘客能够轻松入座。标配车尾行李想 可县挂大件装盒"
					}
				],
				items: [{
						value: '优享保障服务',
						id: '1'
					},
					{
						value: '畅享保障服务',
						id: '2'
					},
					{
						value: '尊享保障服务',
						id: '3'
					}
				],
				stewardItems: [{
						value: '顺心管家服务',
						id: '1'
					},
					{
						value: '舒心管家服务',
						id: '2'
					},
					{
						value: '随心管家服务',
						id: '3'
					}
				],
				radioUpgradeValue: '',
				radioStewardValue: '',
				//服务项目1
				DtlAudiSVListA: [{
						UID: 1230,
						CarModelName: 'Q3 e-tron', //车系
						CarSvrItemName: '保漳理赔范夏内的全额车损(不含轮胎)', //项目名称
						CarSVIPriceA: '￥1290', //费用[优享保漳服务]
						CarSVIPriceB: '￥1500', //费用[畅事保障服务]
						CarSVIPriceC: '￥1880' //费用[尊事保障服务]
					},
					{
						UID: 1235,
						CarModelName: 'Q3 e-tron', //车系
						CarSvrItemName: '无需承担车辆经营损失天数', //项目名称
						CarSVIPriceA: '2天', //费用[优享保漳服务]
						CarSVIPriceB: '7天', //费用[畅事保障服务]
						CarSVIPriceC: '10天' //费用[尊事保障服务]
					},
					{
						UID: 1235,
						CarModelName: 'Q3 e-tron', //车系
						CarSvrItemName: '单方事故巨本车车损低于5000元(含) 时，无需提供理赔资料', //项目名称
						CarSVIPriceA: '￥20', //费用[优享保漳服务]
						CarSVIPriceB: '￥80', //费用[畅事保障服务]
						CarSVIPriceC: '￥100' //费用[尊事保障服务]
					},
					{
						UID: 1236,
						CarModelName: 'Q3 e-tron', //车系
						CarSvrItemName: '三青保障金额', //项目名称
						CarSVIPriceA: '￥100万', //费用[优享保漳服务]
						CarSVIPriceB: '￥200万', //费用[畅事保障服务]
						CarSVIPriceC: '￥300万' //费用[尊事保障服务]
					},
					{
						UID: 1239,
						CarModelName: 'Q3 e-tron', //车系
						CarSvrItemName: '司乘每座意外保障全额', //项目名称
						CarSVIPriceA: '￥1万', //费用[优享保漳服务]
						CarSVIPriceB: '￥6万', //费用[畅事保障服务]
						CarSVIPriceC: '￥9万' //费用[尊事保障服务]
					},
					{
						UID: 1251,
						CarModelName: 'Q3 e-tron', //车系
						CarSvrItemName: '价格', //项目名称
						CarSVIPriceA: '￥580次', //费用[优享保漳服务]
						CarSVIPriceB: '￥980次', //费用[畅事保障服务]
						CarSVIPriceC: '￥1280次' //费用[尊事保障服务]
					}
				],

				//服务项目2
				DtlAudiSVListB: [{
						UID: 4781,
						CarModelName: 'Q3 e-tron', //车系
						CarSvrItemName: '上门取送服务', //项目名称
						CarSVIPriceA: '2次', //费用[优享保漳服务]
						CarSVIPriceB: '2次', //费用[畅事保障服务]
						CarSVIPriceC: '2次' //费用[尊事保障服务]
					},
					{
						UID: 4787,
						CarModelName: 'Q3 e-tron', //车系
						CarSvrItemName: '上门取送服务', //项目名称
						CarSVIPriceA: '￥70次', //费用[优享保漳服务]
						CarSVIPriceB: '￥70次', //费用[畅事保障服务]
						CarSVIPriceC: '￥70次' //费用[尊事保障服务]
					},
					{
						UID: 4787,
						CarModelName: 'Q3 e-tron', //车系
						CarSvrItemName: '夜间上门取送服务', //项目名称
						CarSVIPriceA: '￥100次', //费用[优享保漳服务]
						CarSVIPriceB: '￥100次', //费用[畅事保障服务]
						CarSVIPriceC: '￥100次' //费用[尊事保障服务]
					}

				]
			}
		},
		methods: {
			chooseItem(item, index) {
				this.current = index
			},
			swiperChanged(e) {
				this.current = e.detail.current
			},
			openServerClick(type) {
				this.$refs.popup.open('center')
			},
			closeServerClick() {
				this.$refs.popup.close()
			},
			radioUpgradeCheck(index) {
				this.items.forEach((item => {
					item.isCheck = false
				}))
				if (this.radioUpgradeValue == this.items[index].value) {
					this.radioUpgradeValue = null
				} else {
					this.radioUpgradeValue = this.items[index].value
				}
				console.log(this.radioUpgradeValue)
			},
			radioStewardCheck(index) {
				this.stewardItems.forEach((item => {
					item.isCheck = false
				}))
				if (this.radioStewardValue == this.stewardItems[index].value) {
					this.radioStewardValue = null
				} else {
					this.radioStewardValue = this.stewardItems[index].value
				}
				console.log(this.radioStewardValue)
			}
		}

	}
</script>

<style lang="scss" scoped>
	.home-page-swiper {
		width: 100%;
		height: 190vh;
		display: flex;
		flex-direction: column;
	}

	.popup-title {
		color: red;
		text-align: center;
		line-height: 60rpx;
		letter-spacing: 5rpx
	}

	.popup-subtitle {
		font-size: 25rpx;
		font-weight: 500;
		letter-spacing: 5rpx;
		line-height: 60rpx;
	}

	.popup-summarize {
		font-size: 25rpx;
		color: #606266;
		letter-spacing: 2rpx;
		line-height: 35rpx;
	}

	.popup-content {
		margin-top: 25rpx;
		font-size: 22rpx;
		line-height: 35rpx;
	}

	.car-conten-title {

		display: inline-block;
		font-size: 24rpx;

	}

	.car-conten-icon {
		height: 24rpx;
		width: 28rpx;
		padding-left: 8rpx;
		margin-bottom: 12rpx;
	}

	.cur {
		font-weight: 500;
		font-size: 1.5em;
	}

	.carTypeTitle {
		margin-top: 10rpx;
		color: black;
		padding-left: 20rpx;
		font-size: 35rpx;
		font-weight: 800;
	}

	.carTypetext {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		padding-left: 20rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #828282;
		letter-spacing: 5rpx
	}

	.car-name {
		font-size: 35rpx;
		font-weight: 500;
		text-align: center;
	}

	.car-Model {
		padding-top: 10rpx;
		font-size: 30rpx;
		font-weight: 100;
		text-align: center;
	}

	.car-container {
		width: 100%;
		margin-left: 20rpx;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
	}

	.row-left-content {
		padding-top: 15rpx;
		display: inline-block;
		width: 200rpx;
		height: 43rpx;
		border-radius: 30rpx;
		text-align: center;
		font-size: 25rpx;
		background-color: gainsboro;
	}

	.row-middle-content {
		padding-top: 14rpx;
		display: inline-block;
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		color: red;
		font-size: 25rpx;
	}

	.row-right-content {
		padding-top: 15rpx;
		display: inline-block;
		width: 280rpx;
		height: 50rpx;
		font-weight: 300;
		text-align: left;
		font-size: 25rpx;

	}

	.row-left-body {
		border-top-left-radius: 30px;
		border-bottom-left-radius: 30px;
		display: inline-block;
		width: 350rpx;
		height: 100rpx;
		text-align: center;
		line-height: 120rpx;
		background-color: #534b4b;
		color: aliceblue;
	}

	.row-right-body {
		display: inline-block;
		color: white;
		width: 220rpx;
		height: 100rpx;
		font-weight: 600;
		text-align: center;
		line-height: 120rpx;
		background-color: red;
		border-top-right-radius: 30px;
		border-bottom-right-radius: 30px;
	}
</style>